<%@ include file="includes/head.jsp" %>

<%@ page import = "java.text.MessageFormat" %>
<header>
	<h1>
	<%
		String user = (String)session.getAttribute("username");
				
		if(user !=null){
			out.println("Bienvenid@ " + user);
		
		}else{
			out.println("[x] No registrado");
		}
	%></h1>
	<h2>
		<a href="logout" title="Desconectar">[X] Desconectar</a>
	</h2>
	<h3>
		Cargar propiedad 
		<span>
			<%
				out.println(MessageFormat.format(propertiesMsg.getProperty("login.success"),session.getAttribute("username")));		
			
			%>
		</span>
	</h3>		
</header>
	
	<h2>
	${sessionScope.user}	
	</h2>
	<h3>
	Fecha: <%=Utilidades.getActualDate() %>
	</h3>
	<!-- Tag NAV aporta un valor semantico para el contenido interno, es este caso, de Navegacion-->
	<nav>		
		<ol><!-- lista ordenada, ul es para lista no ordenada-->
			<!-- elementos de la lista -->
			
			<li><a href="request-info?param1=Esti&param2=Candel">Ejemplo Request Info por GET</a></li>
			<li><a href="servletRanking">Ranking alumnos</a></li>
			<li><a href="javaScript.jsp">Ejemplos de JavaScript</a></li>
			<li><a href="jQuery.jsp">Ejemplos de jQuery</a></li>
			<li><a href="formularioAcuseRecibo.jsp">Formulario acuse recibo</a></li>
		</ol>
	</nav>

	<hr/>
	<!-- formulario para realizar peticion POST al Request de Info -->
	<form action="request-info" method="post">
		
		<input type="text" name="nombre" placeholder="Escribe tu nombre"/>
		<input type="text" name="apellido1" placeholder="Escribe tu primer apellido"/>
		<br/><b>Sexo:</b><br/>
		<input type="radio" name="tipo" value="Hombre">Hombre
		<input type="radio" name="tipo" value="Mujer" checked="checked">Mujer
		<br><br>
		<input type="submit" value="enviar" />		
	</form>	
	
	<!-- linea separadora -->	
	<hr/>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus turpis eu sapien pharetra, id faucibus quam adipiscing. Aenean condimentum erat nec metus dictum bibendum. In posuere quis sapien vitae porttitor. Morbi ultricies commodo luctus. Ut vel malesuada libero. Praesent commodo risus at felis malesuada, nec tristique enim vulputate. Nam venenatis rhoncus purus sit amet elementum. Vivamus porttitor diam sed ante tincidunt, eget interdum odio consectetur. Vivamus in volutpat nibh. Pellentesque sapien nisl, accumsan eget enim ut, porttitor volutpat libero. Aliquam mollis eros vel vulputate posuere. Maecenas sed erat dui. Sed in tincidunt dolor. Mauris nec dolor lobortis, dictum nulla eu, interdum metus. Curabitur hendrerit odio nec felis cursus, eget sodales erat sagittis. 
	</p>
	
	<%	
	for(int i=1; i<=6; i++ ) { 
		out.print("<h"+i+">Cabecera "+ i +"</h"+i+">");
	} %>
	



	<table id="tabla" border="1">
	  <thead>
	    <tr>
	      <th>Month</th>
	      <th>Savings</th>
	    </tr>
	  </thead>
	  <tfoot>
	    <tr>
	      <td colspan="2"> Pie de pagina </td>
	    </tr>
	  </tfoot>
	  <tbody>
	  <% for(int i=0; i<50; i++ ) 
	  	 { 
		 	 out.print("<tr><td>January" + i + "</td><td>$100" + i + "</td></tr>");
	  	 }
	  %>
	    <!-- <tr>
	      <td>January</td>
	      <td>$100</td>
	    </tr>
	    <tr>
	      <td>February</td>
	      <td>$80</td>
	    </tr>
	     -->
	  </tbody>
	</table> 

	<script >
		$( document ).ready(function() {
			//aplicar libreria para tablas
			$('#tabla').dataTable();
			
			  //alert('Hello JQuery');
			  $("h1").css("border","3px dotted red");
			  $("p").click(function(){
				  $(this).hide();
			  });
		});
		
		
	/*
		function init(){
			alert('Hello World');			
		}
	*/
		//esperamos a cargar toda la pagina para llamar a la funcion de init
		//window.onload = init();
	
	</script>
	

<%@ include file="includes/footer.jsp" %>